<!-- 区域的组件 -->
<template>

	<el-row >
		<el-card class="box-card" :header="widget.options.header"   :shadow="widget.options.shadow">
			<div v-for="(column1,index) in tableData">
				<div v-for="(column,p_index) in columns" :key="column.key" :class="{'el-col-24': columns.length%2!=0&&p_index==columns.length-1}">

					<el-col :span="column.options !== undefined  &&  column.options.span" class="drag-widget field-item">
						<!--			<label v-if="column.type != 'divider'" style="min-width:70px;float: left;"  :class="{'is_req': column.options.required,'display':'block'}"> {{column.name}}: </label>-->
						<div v-if="column">
							<div v-if="column.model" >
								<el-form-item    :class="{'is_req': column.options.required,'display':'block'}"   :label="getLable(column)" :prop="widget.model+'.'+index+'.'+column.model" :rules="column.rules?column.rules:[]"


								>

									<GenerateElementItem
											:blanks="blanks" is-table='block'
											:path="widget.model+'.'+index+'.'+column.model"
											v-model="value[index][column.model]"
											:models_temp="models_temp"
											:widget="column"
											:remote="remote"
											:models.sync="dataModels"
											:strutAll="strutAll"
											:index="2"
									>

									</GenerateElementItem>
								</el-form-item>
							</div>
						</div>
					</el-col>
				</div>
			</div>

		</el-card>






	</el-row>

</template>

<script>
	import {importXLSX } from  '../../router/xlsx.js'
	import {verification } from  '../../router/verification.js'
	import {getLable} from '../../js/formUtils.js'

	function isInArray(arr,value){

		for(var i = 0; i < arr.length; i++){
			if(value === arr[i]){
				return true;
			}
		}
		return false;
	}
	export default {

		components: {
			GenerateElementItem: () => import('../../GenerateElementItem.vue')
		},
		props: ['columns', 'value', 'models', 'remote', 'blanks','models_temp','widget','strutAll','data','path'],
		data () {

			//console.log(this.columns[0].options.defaultValue);
			return {
				tableData: this.value,
				dataModels: this.models,
				checkedCities: [],
				dialogVisible: false,
				dialogFormVisible: false
			}
		},
		created(){
			for(var i=0;i<this.columns.length;i++){
				if(this.columns[i].rules) {
					for (var j = 0; j < this.columns[i].rules.length; j++) {
						this.columns[i].rules[j].validator=this.validatePass;
					}
				}
			}
		},
		methods: {
			getLable:function(element){
				return getLable(element)
			},
			validatePass(rule, info, callback) {
				verification(rule, info, callback)
			},
			handleAddRow () {
				var dataModels=this.dataModels
				let item = {}
				if (this.columns !== undefined    ){
					if (this.columns.length > 0){
						for (let i = 0; i < this.columns.length; i++) {
							item[this.columns[i].model] = ""
						}


					}
				}
				this.tableData.push(item);


			},
			handleRemove (index) {
				this.tableData.splice(index, 1)
			},
			isInArray(arr,value){
				for(var i = 0; i < arr.length; i++){
					if(value === arr[i]){
						return true;
					}
				}
				return false;
			},
			handleImport(){

			},
			handleClose(){
				this.$confirm('确认关闭？')
						.then(_ => {
							done();
						})
						.catch(_ => {});
			}
			,
			handleCheckedCitiesChange(value) {
				this.checkedCities=value;

			},
			exportData(){
				this.dialogFormVisible = false;
			}
			,
			confirmDialog(value) {
				this.dialogFormVisible=false;
				var  checkedCities= this.checkedCities
				if (checkedCities.length==0){
					return
				}
				var title=[];
				var columns=  this.columns;
				for (var i = 0; i <columns.length ; i++) {
					var column=   columns[i]
					var exist= isInArray(checkedCities,column.model);
					if(exist){
						title.push(column.name)
					}
				}
				var items=[];
				for(let i=0;i<this.checkedCities.length;i++){
					var item=[];
					for(let j=0;j<this.tableData.length;j++){
						item.push(this.tableData[j][this.checkedCities[i]])
					}
					items[this.checkedCities[i]]=item;
				}
				console.log(items);
				console.log(title);
				var 	_data=[];
				_data.push(title)


				for(let j=0;j<this.tableData.length;j++){
					var t=	this.tableData[j];
					var td=[];
					for(let i=0;i<this.checkedCities.length;i++){
						var d=	t[checkedCities[i]]
						td.push(d)
					}
					_data.push(td)
				}
				importXLSX(_data,this.widget.name)
			}


			/*
                        handleRemove (index) {
                            this.tableData.splice(index, 1)
                        }
                    },
                    mounted () {
                        /*if (this.tableData) {
                            if ( this.tableData!== undefined  ) {
                                if (this.tableData.length==0){
                                    this.handleAddRow();
                                }
                            }

                        }*/

		},
		watch: {
			/*value (val) {
				this.tableData = val
			},
			tableData (val) {
				this.$emit('input', val)
			},
			dataModels: {
				deep: true,
				handler (val) {
					this.$emit('update:models', val)
				}
			},
			models: {
				deep: true,
				handler (val) {
					this.dataModels = val
				}
			}*/
		},

	}
</script>

<style lang="scss">
	.row-bd{
		border: 1px solid #EBEEF5;
		padding-top:12px;
	}
	.addRow{
		display: block !important;
		margin-top: 18% !important;
	}
	.is_req {
		content: '*';
		color: #f56c6c;
		margin-right: 4px;
	}
</style>


